<template>
    <div class="switch switch-{{size}}  switch-wrapper {{disabled?'switch-disabled':''}}" :style="{width:onWidth+middleWidth+'px'}">
        <div class="switch-container" v-bind:style="{width:onWidth*2+middleWidth+'px',marginLeft:offsetLeft+'px',fontSize:0}" @click='toggle'>
            <span v-el:won class="switch-handle-on switch-{{onColor}}">{{onText}}</span>
            <span v-el:m class="switch-label">&nbsp;</span>
            <span v-el:woff class="switch-handle-on switch-{{offColor}}" :style="{width:onWidth+'px'}">{{offText}}</span>
        </div>
    </div>
</template>
<script>
    export default{
        props: {
            state: {
                type: Boolean,
                default: true
                // true or false
            },
            size: {
                type: String,
                default: "normal"
                //  mini,small normal large
            },
            disabled: Boolean,
            onColor: {
                type: String,
                default: "info"
                // info primary success warning
            },
            offColor: {
                type: String,
                default: "warning"
                // info primary success warning
            },
            onText: String,
            offText: String,
            clickMethod:{
                type: Function,
                default(){

                }
            }
        },
        data(){
            return {
                onWidth: 0,
//                offWidth: 0,
                height: "",
                middleWidth: 0
            }
        },
        computed: {
            offsetLeft(){
                return this.state ? 0 : -this.onWidth;
            }
        },
        methods: {
            toggle: function () {
                if(!this.disabled){
                    this.state = !this.state;
                    this.clickMethod()
                }

            }
        },
        ready(){
            var self=this;
            setTimeout(
                    function () {
                        var on= Math.ceil(parseFloat(self.$els.won.clientWidth));
                        var off = parseFloat(self.$els.woff.clientWidth);
                        self.$data.height = self.$els.won.clientHeight;
                        self.$data.middleWidth = parseInt(self.$els.m.clientWidth);
                        self.$data.onWidth = on;
                        self.$els.won.style.width=on+"px";
//                        console.log(self.$data)
                    },800)


        }
    }


</script>
<style>
    /* ========================================================================
 * switch - v3.3.2
 * http://www.switch.org
 * ========================================================================
 * Copyright 2012-2013 Mattia Larentis
 *
 * ========================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================================
 */

    .switch {
        display: inline-block;
        direction: ltr;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid;
        border-color: #cccccc;
        position: relative;
        text-align: left;
        overflow: hidden;
        line-height: 8px;
        z-index: 0;
        font-size: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        vertical-align: middle;
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .switch .switch-container {
        display: inline-block;
        top: 0;
        border-radius: 4px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition: all 0.5s;
    }

    .switch .switch-handle-on,
    .switch .switch-handle-off,
    .switch .switch-label {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block !important;
        height: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 20px;
    }

    .switch .switch-handle-on,
    .switch .switch-handle-off {
        text-align: center;
        z-index: 1;
    }

    .switch .switch-handle-on.switch-primary,
    .switch .switch-handle-off.switch-primary {
        color: #fff;
        background: #337ab7;
    }

    .switch .switch-handle-on.switch-info,
    .switch .switch-handle-off.switch-info {
        color: #fff;
        background: #5bc0de;
    }

    .switch .switch-handle-on.switch-success,
    .switch .switch-handle-off.switch-success {
        color: #fff;
        background: #5cb85c;
    }

    .switch .switch-handle-on.switch-warning,
    .switch .switch-handle-off.switch-warning {
        background: #f0ad4e;
        color: #fff;
    }

    .switch .switch-handle-on.switch-danger,
    .switch .switch-handle-off.switch-danger {
        color: #fff;
        background: #d9534f;
    }

    .switch .switch-handle-on.switch-default,
    .switch .switch-handle-off.switch-default {
        color: #000;
        background: #eeeeee;
    }

    .switch .switch-label {
        text-align: center;
        margin-top: -1px;
        margin-bottom: -1px;
        z-index: 100;
        color: #333333;
        background: #ffffff;
    }

    .switch .switch-handle-on {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }

    .switch .switch-handle-off {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .switch input[type='radio'],
    .switch input[type='checkbox'] {
        position: absolute !important;
        top: 0;
        left: 0;
        margin: 0;
        z-index: -1;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .switch.switch-mini .switch-handle-on,
    .switch.switch-mini .switch-handle-off,
    .switch.switch-mini .switch-label {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
    }

    .switch.switch-small .switch-handle-on,
    .switch.switch-small .switch-handle-off,
    .switch.switch-small .switch-label {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
    }

    .switch.switch-large .switch-handle-on,
    .switch.switch-large .switch-handle-off,
    .switch.switch-large .switch-label {
        padding: 6px 16px;
        font-size: 18px;
        line-height: 1.3333333;
    }

    .switch.switch-disabled,
    .switch.switch-readonly,
    .switch.switch-indeterminate {
        cursor: default !important;
    }

    .switch.switch-disabled .switch-handle-on,
    .switch.switch-readonly .switch-handle-on,
    .switch.switch-indeterminate .switch-handle-on,
    .switch.switch-disabled .switch-handle-off,
    .switch.switch-readonly .switch-handle-off,
    .switch.switch-indeterminate .switch-handle-off,
    .switch.switch-disabled .switch-label,
    .switch.switch-readonly .switch-label,
    .switch.switch-indeterminate .switch-label {
        opacity: 0.5;
        filter: alpha(opacity=50);
        cursor: default !important;
    }

    .switch.switch-animate .switch-container {
        -webkit-transition: margin-left 0.5s;
        -o-transition: margin-left 0.5s;
        transition: margin-left 0.5s;
    }

    .switch.switch-inverse .switch-handle-on {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .switch.switch-inverse .switch-handle-off {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }

    .switch.switch-focused {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    .switch.switch-on .switch-label,
    .switch.switch-inverse.switch-off .switch-label {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .switch.switch-off .switch-label,
    .switch.switch-inverse.switch-on .switch-label {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }

</style>
